<template>
<div class="common-layout">
  <el-container>
    <el-aside :width="isCollapse?'60px':'210px'">
      <nav-menu :is-fold="isCollapse"/>
    </el-aside>
    <el-container>
      <el-header>
        <nav-header @fold-change="handleFoldChange"/>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</div>
</template>

<script setup lang="ts">

import NavMenu from "@/components/nav-menu.vue";
import NavHeader from "@/components/nav-header.vue"
import {ref} from "vue";

let isCollapse =ref(false)
function handleFoldChange(val){
  isCollapse.value=val
}
</script>

<style scoped>
.common-layout {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-aside {
  /*overflow-x: hidden;*/
  overflow-y: auto;
  line-height: 200px;
  text-align: left;
  cursor: pointer;
  /*background-color: #001529; */
  transition: width 0.3s linear; /*菜单折叠的动画*/
}
.el-header {
  /*background-color: yellow;*/
}
.el-main {
  /*background-color: azure;*/
  padding: 0px;
}
</style>
